<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avaer_box">
				<img src="../assets/356473469.jpg" alt="" />
			</div>
		<!-- 登录表单区域 -->
			<el-form ref="LoginFormRef" :rules="LoginRules" :model="LoginForm" label-width="0px" class="login_form">
				<!-- 账号输入框 -->
			  <el-form-item prop="username">
				<el-input  prefix-icon="iconfont icon-usercenter" v-model="LoginForm.username" placeholder="请输入账号"></el-input>
			  </el-form-item>
			  <!-- 密码输入框 -->
			  <el-form-item prop="password">
			  	<el-input show-password prefix-icon="iconfont icon-unlock" placeholder="请输入密码" v-model="LoginForm.password" autocomplete="off"></el-input>
			  </el-form-item>
			  <!-- 按钮 -->
			  <el-form-item class="btns">
				   <el-button type="primary" @click="login">登录</el-button>
				    <el-button type="info" @click="resetLoginForm">重置</el-button>
			  </el-form-item>
			  </el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				LoginForm:{			//登录表单数据
					username:'admin',
					password:'123456'
				},
				 LoginRules: {		//表单验证规则
					  username: [
						{ required: true, message: '请输入用户名称', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					  ],
					  password: [
					   { required: true, message: '请输入用户名称', trigger: 'blur' },
					   { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
					  ],
					}
			}
		},
	    methods: {
			login(){
				// this.$refs.LoginFormRef.validate(valid => {		//验证数据是否合法
				// 	console.log(valid)
				// 	})
				var data = {
					username:this.LoginForm.username,
					password:this.LoginForm.password
				}
					this.$axios.post('login',data).then(data => {
						console.log(data.data)
						console.log(data.data.meta.status)
						if(data.data.meta.status != 200){
							  this.$message({showClose: true,message: '账号或密码错误',type: 'error'});
						}else{
							this.$message({showClose: true,message: '成功登录', type: 'success'});
							window.sessionStorage.setItem("token",data.data.data.token);		//将 token 保存到 sessionStorage 当中 便于验证当前用户
							this.$router.push('/home')		//跳转路由为 /home 的页面 
						}
				})
			},
			resetLoginForm(){				//重置表单数据
			  this.$refs.LoginFormRef.resetFields();	
		  }
	    }
	}
</script>

<style lang="scss"  scoped>
	.login_container {
		background: url("../assets/背景.jpg");
		background-size:cover;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center; 
		.login_box{
			width: 450px;
			height: 300px;
			background-color: #ffff;
			border-radius: 6px;
			.avaer_box{
				height: 130px;
				width: 130px;
				border: 1px solid #eee;
				border-radius: 50%;
				padding: 5px;
				box-shadow: 0 0 10px #ddd;
				margin: 0 auto;
				margin-top: -50px;
				img{
					height: 100%;
					width: 100%;
					border-radius: 50%; 
					background-color: #eee;
				}
			}
		}
		.login_form{
			padding: 0 20px;
			box-sizing: border-box;
			.btns{
				display: flex;
				justify-content: center;
			}
		}
		
	}
</style>
